<template>
  <div id="bg">
    <!--数据大屏标题-->
    <div class="header">
      <div class="bg_header">
        <div class="date fl">
          <p v-text="date"></p>
        </div>
        <div class="fl t_title">
          长春市新冠疾控指挥中心
        </div>
        <div class="time fr">
          <p v-text="time"></p>
        </div>
      </div>
    </div>

    <!--数据大屏内容主体-->
    <div class="data_content">

      <!--数据大屏内容主显示区-->
      <div class="data_main">
        <!--数据大屏内容主显示区左部-->
        <div class="main_left fl">
          <!--数据大屏内容主显示区左部1-->
          <div class="left_1">
            <!--左上边框-->
            <div class="t_line_box">
              <i class="t_l_line"></i>
              <i class="l_t_line"></i>
            </div>
            <!--右上边框-->
            <div class="t_line_box">
              <i class="t_r_line"></i>
              <i class="r_t_line"></i>
            </div>
            <!--左下边框-->
            <div class="t_line_box">
              <i class="l_b_line"></i>
              <i class="b_l_line"></i>
            </div>
            <!--右下边框-->
            <div class="t_line_box">
              <i class="r_b_line"></i>
              <i class="b_r_line"></i>
            </div>
            <div class="main_title">
              <img src="../../assets/images_screen/t_1.png" alt="">当前确诊分布
            </div>
            <div class="chart1-pie-box">
              <div id="chart1-pie" style="width:100%;"></div>
            </div>
          </div>
          <!--数据大屏内容主显示区左部2-->
          <div class="left_2">
            <!--左上边框-->
            <div class="t_line_box">
              <i class="t_l_line"></i>
              <i class="l_t_line"></i>
            </div>
            <!--右上边框-->
            <div class="t_line_box">
              <i class="t_r_line"></i>
              <i class="r_t_line"></i>
            </div>
            <!--左下边框-->
            <div class="t_line_box">
              <i class="l_b_line"></i>
              <i class="b_l_line"></i>
            </div>
            <!--右下边框-->
            <div class="t_line_box">
              <i class="r_b_line"></i>
              <i class="b_r_line"></i>
            </div>
            <div class="main_title">
              <img src="../../assets/images_screen/t_2.png">七日疫情变化
            </div>
            <div class="chart2-column-box">
              <div id="chart2-column" style="width: 100%;"></div>
            </div>
          </div>
        </div>
        <!--数据大屏内容主显示区中部-->
        <div class="main_center fl">
          <div class="center_label">
            <div class="label-group fl">
              <span class="count"><i style="color: #ff4e4e;">{{numDiagnostic}}</i><em>个</em></span>
              <span class="text">确诊病例</span>
            </div>
            <div class="label-group fl">
              <span class="count"><i style="color: orange">{{numCloseContact}}</i><em>个</em></span>
              <span class="text">密接人员</span>
            </div>
            <div class="label-group fl">
              <span class="count"><i style="color: #ffff43">--</i><em>个</em></span>
              <span class="text">次密接人员</span>
            </div>
            <div class="label-group fl">
              <span class="count"><i style="color:white">--</i><em>个</em></span>
              <span class="text">一般接触人员</span>
            </div>
          </div>
          <div class="center_map">
            <!--左上边框-->
            <div class="t_line_box">
              <i class="t_l_line"></i>
              <i class="l_t_line"></i>
            </div>
            <!--右上边框-->
            <div class="t_line_box">
              <i class="t_r_line"></i>
              <i class="r_t_line"></i>
            </div>
            <!--左下边框-->
            <div class="t_line_box">
              <i class="l_b_line"></i>
              <i class="b_l_line"></i>
            </div>
            <!--右下边框-->
            <div class="t_line_box">
              <i class="r_b_line"></i>
              <i class="b_r_line"></i>
            </div>
            <div class="main_title">
              <img src="../../assets/images_screen/t_3.png" @click="ditailMap">疫情地域分布
            </div>
            <div class="chart5-map-box fl">
              <div id="chart5-map" ></div>
            </div>
          </div>
        </div>
        <!--数据大屏内容主显示区右部-->
        <div class="main_right fr">
          <!--数据大屏内容主显示区右部1-->
          <div class="right_1">
            <!--左上边框-->
            <div class="t_line_box">
              <i class="t_l_line"></i>
              <i class="l_t_line"></i>
            </div>
            <!--右上边框-->
            <div class="t_line_box">
              <i class="t_r_line"></i>
              <i class="r_t_line"></i>
            </div>
            <!--左下边框-->
            <div class="t_line_box">
              <i class="l_b_line"></i>
              <i class="b_l_line"></i>
            </div>
            <!--右下边框-->
            <div class="t_line_box">
              <i class="r_b_line"></i>
              <i class="b_r_line"></i>
            </div>
            <!--标题-->
            <div class="main_title">
              <img src="../../assets/images_screen/t_4.png" alt="">
              疫情状况预警
            </div>
            <!--图表显示-->
            <div class="chart7-alert-box">
              <div id="chart7-alert-1" class="alert-lamp fl"></div>
              <div id="chart7-alert-2" class="alert-lamp fl"></div>
              <div id="chart7-alert-3" class="alert-lamp fl"></div>
              <div class="alert-message fl">
                <span v-text="chart7_alertMessage"></span>
              </div>
            </div>
          </div>
          <!--数据大屏内容主显示区右部-->
          <div class="right_2">
            <!--左上边框-->
            <div class="t_line_box">
              <i class="t_l_line"></i>
              <i class="l_t_line"></i>
            </div>
            <!--右上边框-->
            <div class="t_line_box">
              <i class="t_r_line"></i>
              <i class="r_t_line"></i>
            </div>
            <!--左下边框-->
            <div class="t_line_box">
              <i class="l_b_line"></i>
              <i class="b_l_line"></i>
            </div>
            <!--右下边框-->
            <div class="t_line_box">
              <i class="r_b_line"></i>
              <i class="b_r_line"></i>
            </div>
            <div class="main_title">
              <img src="../../assets/images_screen/t_5.png">防疫资源负荷
            </div>
            <div class="chart8-pie-box">
              <div id="chart8-pie-1"></div>
              <div id="chart8-pie-2"></div>
            </div>
          </div>
        </div>
      </div>
      <!--数据大屏内容下部显示区-->
      <div class="data_bottom">
        <!--数据大屏内容下部显示区左侧-->
        <div class="bottom_l fl">
          <!--左上边框-->
          <div class="t_line_box">
            <i class="t_l_line"></i>
            <i class="l_t_line"></i>
          </div>
          <!--右上边框-->
          <div class="t_line_box">
            <i class="t_r_line"></i>
            <i class="r_t_line"></i>
          </div>
          <!--左下边框-->
          <div class="t_line_box">
            <i class="l_b_line"></i>
            <i class="b_l_line"></i>
          </div>
          <!--右下边框-->
          <div class="t_line_box">
            <i class="r_b_line"></i>
            <i class="b_r_line"></i>
          </div>
          <div class="main_title">
            <img src="../../assets/images_screen/t_6.png" alt="">
            入境人员监控
          </div>
          <div class="chart3-line-box" >
            <div id="chart3-line" style="width: 100%" ></div>
          </div>
        </div>

        <!--数据大屏内容下部显示区中间-->
        <div class="bottom_center fl">
            <!--左上边框-->
            <div class="t_line_box">
              <i class="t_l_line"></i>
              <i class="l_t_line"></i>
            </div>
            <!--右上边框-->
            <div class="t_line_box">
              <i class="t_r_line"></i>
              <i class="r_t_line"></i>
            </div>
            <!--左下边框-->
            <div class="t_line_box">
              <i class="l_b_line"></i>
              <i class="b_l_line"></i>
            </div>
            <!--右下边框-->
            <div class="t_line_box">
              <i class="r_b_line"></i>
              <i class="b_r_line"></i>
            </div>
            <div class="main_title">
              <img src="../../assets/images_screen/t_7.png" alt="">长春疫情累计
            </div>
            <div class="chart6-line-box">
              <div id="chart6-line" style="width: 100%"></div>
            </div>
        </div>

        <!--数据大屏内容下部显示区右侧-->
        <div class="bottom_r fr">
          <!--左上边框-->
          <div class="t_line_box">
            <i class="t_l_line"></i>
            <i class="l_t_line"></i>
          </div>
          <!--右上边框-->
          <div class="t_line_box">
            <i class="t_r_line"></i>
            <i class="r_t_line"></i>
          </div>
          <!--左下边框-->
          <div class="t_line_box">
            <i class="l_b_line"></i>
            <i class="b_l_line"></i>
          </div>
          <!--右下边框-->
          <div class="t_line_box">
            <i class="r_b_line"></i>
            <i class="b_r_line"></i>
          </div>
          <div class="main_title">
            <img src="../../assets/images_screen/t_7.png" alt=""> 市通知公告
          </div>
          <div class="chart9-message-box">
            <ul v-for="(item,index) in announce">
              <li>
                <p><b>防疫指挥简讯{{index+1}}</b><br/>
                  {{item.content}}<br/>
                </p>
                <p>{{item.createTime}}</p>
              </li>

              <!--<li>-->
<!--                <p><b>防疫指挥部公告1</b><br/>-->
<!--                  今日新增输入病例，流调信息已发布，设及3个社区。<br/>-->
<!--                </p>-->
<!--                <p>2022-10-22</p>-->
<!--              </li>-->
<!--              <li>-->
<!--                <p><b>防疫指挥部公告2</b><br/>-->
<!--                  今日新增本土确诊病例，流调信息已发布，设及4个社区。<br/>-->
<!--                </p>-->
<!--                <p>2022-10-22</p>-->
<!--              </li>-->
<!--              <li>-->
<!--                <p><b>防疫指挥部公告2</b><br/>-->
<!--                  今日新增隔离人员217名，流调信息已发布，设及14个社区。<br/>-->
<!--                </p>-->
<!--                <p>2022-10-22</p>-->
<!--              </li>-->
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import eimBase from '../../api/jsScreen/eimBase'
import eimChart from '../../api/jsScreen/eimChart'
import request from "@/utils/request";

export default {
  name: "EimScreen",
  data(){
    return {
      time: '12:00:00',
      date: '2022/10/21 周五',
      cc: require('../../assets/map/长春市.json'),

      chart1: null,
      chart2: null,
      chart3: null,
      chart5: null,
      chart6: null,
      chart7_1: null,
      chart7_2: null,
      chart7_3: null,
      chart8_1: null,
      chart8_2: null,
      chart7_alertMessage:'',//'疫情风险较低，建议关注外部输入病例，保持本土零新增'

      numDiagnostic: 0,
      numCloseContact: 0,

      announce:[],
    }
  },

  methods:{
    ditailMap(){
      let x = {
        path: '/screenMap',
        component: () => import('@/views/screen/EimScreenMap'),
        name: 'EimScreenMap',
        meta: { title: '地图', icon: 'dashboard', affix: true }
      };
      this.$router.addRoutes([x]);
      this.$router.push('screenMap');
    }
  },
  mounted() {
    //显示时间
    setInterval(()=> {
      this.time = eimBase.timer();
      this.date = eimBase.dater();
    }, 1000);
    //显示确诊与密接数字
    setInterval(()=> {
      request({
        url: '/eim/diagnostic_info/getCurrentNum',
        method: 'post'
      }).then(res => {
        this.numDiagnostic = res.data;
      });
      request({
        url: '/eim/contact_info/getCurrentNum',
        method: 'post'
      }).then(res => {
        this.numCloseContact = res.data;
      });
      //显示通知与公告
      request({
        url: '/system/announce/list',
        method: 'get'
      }).then(res => {
        this.announce = res.rows.reverse().slice(0,3);
      });
      //显示图形
      eimChart.chartFunc1();
      eimChart.chartFunc2();
      eimChart.chartFunc3();
      eimChart.chartFunc5(this.cc);
      eimChart.chartFunc6();
      setTimeout(()=> {
        this.chart7_alertMessage = eimChart.chartFunc7();
      },2000);
      eimChart.chartFunc8();
    },3600000);
  },
  created() {
    //显示确诊与密接人数
    request({
      url: '/eim/diagnostic_info/getCurrentNum',
      method: 'post'
    }).then(res => {
      this.numDiagnostic = res.data;
    });
    request({
      url: '/eim/contact_info/getCurrentNum',
      method: 'post'
    }).then(res => {
      this.numCloseContact = res.data;
    });
    //显示通知与公告
    request({
      url: '/system/announce/list',
      method: 'get'
    }).then(res => {
      this.announce = res.rows.reverse().slice(0,3);
    });
    //显示图形
    eimChart.chartFunc1();
    eimChart.chartFunc2();
    eimChart.chartFunc3();
    eimChart.chartFunc5(this.cc);
    eimChart.chartFunc6();
    setTimeout(()=> {
      this.chart7_alertMessage = eimChart.chartFunc7();
    },2000);
    eimChart.chartFunc8();
  }
}
</script>

<style scoped>
  @import "./cssScreen/eimBase.css";
  @import "./cssScreen/eimMain.css";
  @import "./cssScreen/eimChart.css";
</style>
